<template>
	<view>
		<view class='mobile-logo'>
			<image src="https://jy-shops.oss-cn-beijing.aliyuncs.com/client/logo.png" mode="widthFix" class='mobile-shop-logo'></image>
		</view>
		<view class='mobile-form-item'>
			<view class="mobile-from-label">手机号码</view>
			<input type="phone" placeholder="请输入手机号" v-model="mobile" class='mobile-form-input'/>
		</view>
		<view class='mobile-form-item'>
			<view class="mobile-from-label">验证码</view>
			<input type="phone" placeholder="请输入验证码" v-model="code" class='mobile-form-input input-code'/>
			<view class='mobile-form-code' @tap="getCode">{{time == 60 ? '点击获取验证码' : time+'S后获取'}}</view>
		</view>
		<view class='mobile-form-btn' @tap="submit()">立即提交</view>
	</view>
</template>

<script>
	import {getCode,bindMobile} from '@/common/login.js';
	
	export default{
		data(){
			return {
				mobile : '',
				code : '',
				time : 60,
				timer : ''
			}
		},
		methods:{
			//提交数据
			submit(){
				if(!this.mobile)return this.toast('请输入手机号');
				if(!this.code)return this.toast('请输入验证码');
				uni.showLoading({
					title:'数据提交中'
				})
				bindMobile({
					mobile : this.mobile,
					code : this.code
				}).then((res) =>{
					this.toast(res.msg);
					uni.hideLoading();
					if(res.code) {
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/index/index'
							})
						},1000);
					}
				});
			},
			//获取验证码
			getCode(){
				if(this.time != 60) return false;
				if(!this.mobile)return this.toast('请输入手机号');
				uni.showLoading({
					title:'验证码获取中'
				})
				getCode({
					mobile : this.mobile
				}).then((res)=>{
					uni.hideLoading();
					this.toast(res.msg);
					if(res.code) {
						this.time --;
						this.timer = setInterval(()=>{
							if(this.time == 0) {
								this.time = 60;
								clearInterval(this.timer);
								return false;
							} 
							this.time --;
						},1000);
					}
				});
				
			},
		}
	}
</script>

<style>
	.mobile-form-btn{
		width: calc(100% - 40upx);
		height: 90upx;
		line-height: 90upx;
		background: #FF2842;
		color: #FFFFFF;
		text-align: center;
		margin:20upx auto;
		border-radius: 10upx;
	}
	.mobile-form-code{
		width: 200upx;
		text-align: center;
	}
	.mobile-form-input{
		float: left;
		height: 100upx;
		width: calc(100% - 160upx);
		font-size: 30upx;
	}
	.input-code{
		width: calc(100% - 360upx);
	}
	.mobile-from-label{
		width: 160upx;
	}
	.mobile-shop-logo{
		display: block;
		width: 200upx;
		height: 200upx;
		margin: auto;
	}
	.mobile-logo{
		background: #FFFFFF;
	}
	.mobile-form-item{
		overflow: hidden;
		background: #FFFFFF;
		width: 100%;
		padding: 0 20upx;
		height: 100upx;
		line-height:100upx;
		font-size: 30upx;
		border-bottom: 1upx solid #e1e1e1;
	}
	.mobile-form-item:nth-child(3){
		border: none;
	}
	.mobile-form-item > view{
		float: left;
	}
</style>
